<template>
  <view class="index">
    <image
      class="banner"
      src="@/static/img/banner/star_banner.jpg"
      mode="widthFix"
    ></image>
    <view class="center">
      <view class="content">
        <view class="ind_from">
         <!-- <view class="row">
            <view class="label">您的姓名</view>
            <view class="value">
              <input
                class="input"
                v-model="formData.username"
                placeholder="请输入名字（必须汉字）"
              />
            </view>
          </view> -->
          <view class="row">
            <view class="label">您的性别</view>
            <view class="value">
              <view
                class="pub_radio"
                :class="{ active: formData.gender == 1 }"
                @click="selectGender(1)"
                >男</view
              >
              <view
                class="pub_radio"
                :class="{ active: formData.gender == 0 }"
                @click="selectGender(0)"
                >女</view
              >
            </view>
          </view>
          <view class="row">
            <view class="label">出生日期</view>
            <view class="value">
              <picker
                mode="date"
                :value="formData.xDate"
                start="1912-01-01"
                end="2020-12-31"
                @change="changeXdateChange"
              >
                <view class="uni-input">{{
                  formData.xDate ? formData.xDate : "请选择出生日期"
                }}</view>
              </picker>
            </view>
          </view>
          <view class="row">
            <view class="label">出生时辰</view>
            <view class="value">
              <picker
                :range="dizhiArr"
                range-key="time"
                @change="changeNdateChange($event)"
              >
                <view class="uni-input">{{
                  formData.nDate !== null
                    ? dizhiArr[formData.nDate].title +
                      "【" +
                      dizhiArr[formData.nDate].time +
                      "】"
                    : "请选择时辰"
                }}</view>
              </picker>
            </view>
          </view>
        </view>
        <view class="btn" @click="submit">看广告免费获取</view>
        <view class="sub_text">
          <view class="p red">仅供娱乐 积极生活</view>
        </view>
      </view>
      <view v-if="showResult" class="result">
        <view class="title">你的太阳星座是</view>
        <view class="desc">
          <text class="strong">{{ result.sunSign }}</text>
        </view>
      </view>
      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
    </view>
    <tabBar></tabBar>
  </view>
</template>

<script>
import {
  adVideoCreate,
  adVideoShow,
  adVideoUnload,
  adBannerIdDouyin,
  adBannerIdKuaishou,
  showAdConfirmModal,
} from "@/common/ad";
export default {
  data() {
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      showResult: false,
      formData: {
        gender: 1,
        username: "",
        xDate: "1990-01-01",
        nDate: 0,
      },
      result: {
        sunSign: "",
        title: "",
        desc: "",
      },
      dizhiArr: [
        { val: 0, title: "早子", time: "00:00-00:59" },
        { val: 1, title: "丑", time: "01:00-01:59" },
        { val: 2, title: "丑", time: "02:00-02:59" },
        { val: 3, title: "寅", time: "03:00-03:59" },
        { val: 4, title: "寅", time: "04:00-04:59" },
        { val: 5, title: "卯", time: "05:00-05:59" },
        { val: 6, title: "卯", time: "06:00-06:59" },
        { val: 7, title: "辰", time: "07:00-07:59" },
        { val: 8, title: "辰", time: "08:00-08:59" },
        { val: 9, title: "巳", time: "09:00-09:59" },
        { val: 10, title: "巳", time: "10:00-10:59" },
        { val: 11, title: "午", time: "11:00-11:59" },
        { val: 12, title: "午", time: "12:00-12:59" },
        { val: 13, title: "未", time: "13:00-13:59" },
        { val: 14, title: "未", time: "14:00-14:59" },
        { val: 15, title: "申", time: "15:00-15:59" },
        { val: 16, title: "申", time: "16:00-16:59" },
        { val: 17, title: "酉", time: "17:00-17:59" },
        { val: 18, title: "酉", time: "18:00-18:59" },
        { val: 19, title: "戌", time: "19:00-19:59" },
        { val: 20, title: "戌", time: "20:00-20:59" },
        { val: 21, title: "亥", time: "21:00-21:59" },
        { val: 22, title: "亥", time: "22:00-22:59" },
        { val: 23, title: "晚子", time: "23:00-23:59" },
      ],
      zodiacSigns: [
        "摩羯座",
        "水瓶座",
        "双鱼座",
        "白羊座",
        "金牛座",
        "双子座",
        "巨蟹座",
        "狮子座",
        "处女座",
        "天秤座",
        "天蝎座",
        "射手座",
        "摩羯座",
      ],
      startDate: [21, 20, 19, 21, 21, 21, 22, 23, 23, 23, 22, 22],
    };
  },
  onLoad() {
    adVideoCreate();
  },
  methods: {
    changeXdateChange(e) {
      this.formData.xDate = e.detail.value;
    },
    changeNdateChange(e) {
      for (let i in this.dizhiArr) {
        if (this.dizhiArr[i].val == e.detail.value) {
          this.formData.nDate = parseInt(e.detail.value);
        }
      }
    },
    selectGender(val) {
      this.formData.gender = val;
    },
    getSunSign(birth) {
      var date = new Date(birth);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      let signIndex = month - 1;
      if (day > this.startDate[month - 1]) {
        signIndex++;
      }
      if (month === 1 && day <= 21) {
        signIndex = 11;
      }
      console.log("signIndex", signIndex);
      this.result.sunSign = this.zodiacSigns[signIndex];
      this.showResult = true;
    },
    getResult() {
      this.getSunSign(this.formData.xDate);
      this.isUnlock = true;
    },
    submit() {
      // if (this.formData.username == "") {
      //   this.global.toast("请输入姓名");
      //   return false;
      // }
      // if (!/^[\u4E00-\u9FA5]+$/.test(this.formData.username)) {
      //   this.global.toast("请输入汉字姓名");
      //   return false;
      // }
      if (this.formData.xDate === null) {
        this.global.toast("请选择出生日期");
        return false;
      }
      if (this.formData.nDate === null) {
        this.global.toast("请选择出生时辰");
        return false;
      }
      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.getResult();
            });
          } catch (error) {
            this.getResult();
          }
        });
      } else {
        this.getResult();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  display: block;
  width: 100%;
}
.pub_radio {
  position: relative;
  padding-left: 50rpx;
}
.pub_radio:before {
  position: absolute;
  top: 50%;
  margin-top: -20rpx;
  left: 0;
  content: "";
  width: 40rpx;
  height: 40rpx;
  background-image: url("@/static/img/checked.png");
  background-size: cover;
}
.pub_radio.active {
}
.pub_radio.active:before {
  background-image: url("@/static/img/checked_active.png");
  background-size: cover;
}
.ind_from {
  background: #f9f5ef;
  margin-top: 20rpx;
  border: 4rpx solid #b39569;
  border-radius: 10rpx;
  .row {
    padding: 16rpx 20rpx;
    display: flex;
    border-bottom: 1px solid #ccc;
    &:last-child {
      border-bottom: 0;
    }
    .label {
      width: 180rpx;
      flex-shrink: 0;
    }
    .value {
      width: 100%;
      .input {
        width: 100%;
      }
    }
    .pub_radio {
      display: inline-block;
      margin-right: 40rpx;
    }
  }
}
.btn {
  margin-top: 30rpx;
  background: #db0000;
  color: #fff;
  text-align: center;
  padding: 14rpx 0;
  border-radius: 10rpx;
}
.sub_text {
  text-align: center;
  padding-top: 30rpx;
  font-size: 24rpx;
  color: #666;
  .red {
    color: red;
  }
  .bold {
    font-weight: bold;
  }
}
.pub_ad_banner {
  margin-top: 30rpx;
}

.result {
  background: #f9f5ef;
  margin-top: 20rpx;
  border: 4rpx solid #b39569;
  border-radius: 10rpx;
  padding: 20px 10px;

  .title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
  }
  .desc {
    font-size: 24px;
    text-align: center;
    .strong {
      color: #ff1afe;
    }
  }
}
</style>
